<template>
  <div class="home-content">
    <div class="item top">
      <div class="top-title">最高可借额度(元)</div>
      <div class="top-limit">200,000</div>
      <div class="top-tip">年利率7.2起，3-36期随心还</div>
      <div class="top-icon">
        <div v-for="item in iconArr" class="icon">
          <van-image :src="item.icon" height="50" width="50" class="icon-img">
          </van-image>
          <span class="icon-text">{{ item.text }}</span>
        </div>
      </div>
    </div>
    <div class="item middle">
      <van-cell-group class="imgCodeGroup">
        <van-field
          class="rounded-field"
          v-model="formData.telPhoneNum"
          :formatter="formatter"
          required
          clearable
          placeholder="请输入您的手机号"
        >
          <template #left-icon>
            <div class="phone-icon-image">
              <van-image :src="phoneIcon" width="22" height="22"></van-image>
            </div>
          </template>
        </van-field>
      </van-cell-group>
      <div>
        <van-button
          class="submitBtn"
          block
          round
          native-type="submit"
          @click="onsubmitViewCredit"
          color="rgb(255, 244, 201)"
          >查看额度</van-button
        >
      </div>
      <div class="loginAgreement">
        <van-checkbox
          v-model="boxChecked"
          icon-size="14px"
          checked-color="rgb(255, 244, 201)"
          class="custom-checkbox"
        ></van-checkbox>
        <span style="margin-left: 8px">我已阅读并同意</span
        ><a href="/serviceAgreementyp" style="color: #fff4c9"
          >《软件注册协议》</a
        ><a href="/privacyPolicyyp" style="color: #fff4c9">《隐私协议》</a>
      </div>
    </div>
    <submit-dialog ref="dialogRef" class="my-test"></submit-dialog>
    <!-- <div class="item bottom"></div> -->
    <!-- <div class="item"></div> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { mockApi, checkBrowser } from "@/utils/util";
import submitDialog from "./submitDialog.vue";
import { Checkbox, showToast } from "vant";
import icon3 from "@/assets/channel/content-aqhg.png";
import icon2 from "@/assets/channel/content-edlh.png";
import icon1 from "@/assets/channel/content-tglg.png";
import phoneIcon from "@/assets/channel/phone-icon.png";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

const dialogRef = ref();
const boxChecked = ref(false);
const props = defineProps({
  channel: { type: String, default: "" },
});
const iconArr = ref([
  { icon: icon1, text: "通过率高" },
  { icon: icon2, text: "额度灵活" },
  { icon: icon3, text: "安全合规" },
]);

const formData = reactive({ telPhoneNum: "" });

onMounted(async () => {
  console.log("content: ", props.channel);
});
const onsubmitViewCredit = async () => {
  if (!formData.telPhoneNum) {
    showToast("请先填写手机号");
    return;
  }
  if (!boxChecked.value) {
    showToast("请先同意协议");
    return;
  }
  // 微信浏览器进入引导页面
  const browserType = checkBrowser();
  console.log(browserType);
  await dialogRef.value?.open(formData.telPhoneNum, props.channel);
  // if (browserType == "WeChat Browser") {
  //   // 微信打开落地页跳转引导图
  //   // showToast("----");
  //   router.push("/guideWechat");
  // } else {
  // }
};

const formatter = (value: any) => {
  // 只保留数字，并限制长度为 11
  return value.replace(/\D/g, "").slice(0, 11);
};
</script>

<style lang="scss" scoped>
.home-content {
  color: #fbf6e0;
  background-image: url("@/assets/channel/bg-content.png");
  width: 100%;
  // height: 100%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  .item {
    width: 100%;
  }
  .top {
    display: flex;
    flex-direction: column;
    align-items: center;

    &-title {
      font-size: 14px;
    }
    &-limit {
      font-size: 50px;
      font-weight: bold;
      margin-top: 10px;
    }
    &-tip {
      font-size: 14px;
      margin-top: 5px;
    }
    &-icon {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        &-img {
        }
        &-text {
          font-size: 12px;
        }
      }
    }
  }
  .middle {
    padding: 10px 20px;
    .submitBtn {
      margin: 10px 0;
      :deep(.van-button__content) {
        color: #f1242c;
      }
    }
    .imgCodeGroup {
      border-radius: 999px !important;
      overflow: hidden;
      // margin: 0 20px;
    }
    // .rounded-field {
    //   border-radius: 999px !important;

    //   overflow: hidden;
    // }
    .loginAgreement {
      display: flex;
      justify-content: center;
      font-size: 11px;
      align-items: center;
      color: #fff;
      margin: 20px 0 10px;
    }
  }
}
.phone-icon-image {
  height: 100%;
  display: flex;
  align-items: center;
}
.my-test {
  // padding-top: 2px !important;
  // color: red !important;
}
.custom-checkbox {
  :deep(.van-icon-success) {
    color: #ec3038; /* 勾选图标颜色 */
  }
}
</style>
